<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div data-role="page" id="game">
	<header data-role="header" data-position="fixed">
		<h1>疯狂猜移动版</h1>
		<a href="#" data-role="button" data-rel="back" data-icon="arrow-l">返回</a>
	</header>
	<div data-role="content">
		<div class="gameinfo">
			第<span class="number">1</span>关
			<img src="resources/images/gold_coin.png"><span class="scores">${game.scores}</span>
			<img src="resources/images/clock.png">倒计时：<span class="time"></span>秒
		</div>
		<div class="imageinfo">
			<div class="left">
				<a href="#" id="findimage"><img src="resources/images/find.png"></a>
				<a href="#" id="clearimage"><img src="resources/images/clear.png"></a>
			</div>
			<div class="imagecontent">
				<div class="middle">
					<p class="category">${imageVo.categoryname}</p>
					<p class="img">
						<img id="imageshow"  rel="${picName}" src="resources/images/games${picUrl}"/>
					</p>
				</div>
				<div class="right">
					<a href="#" onclick="WeiXinShareBtn();"><img src="resources/images/share.png"></a>
				</div>
			</div>
		</div>
		<div class="inputanswer">
			<c:forEach begin="1" end="${nameLen}">
				<div class="answer"></div>
			</c:forEach>
		</div>
		<div class="wordlist">
			<ul>
				<c:forEach items="${answers}" var="answer" varStatus="status">
					<li class="word" id="word_${status.index +1}">${answer}</li>
				</c:forEach>
			</ul>
		</div>
		
		<!-- 重新开始游戏 -->
		<div id="restartPopup" data-role="popup" data-overlay-theme="a" data-dismissible="false">
			<div data-role="header">
				<h1>游戏结束</h1>
			</div>
			<div data-role="content">
				<p style="text-align:center"><img src="resources/images/play.png" style="width:128px;height:128px"/></p>
			
				<a href="#" data-role="button" data-inline="true" rel="${user.loginid}" class="restartGame">重新游戏</a>
				<a href="#welcome" data-role="button" data-inline="true" >返回</a>
			</div>
		</div>
		<!-- 重新开始游戏结束 -->
		
		<!-- 猜图成功，进入下一关 -->
		<div id="nextPopup" data-role="popup" data-overlay-theme="a" data-dismissible="false">
			<div data-role="header">
				<h1>恭喜过关</h1>
			</div>
			<div data-role="content">
				<p><img src="resources/images/gold_coin.png" style="width:32px;height:32px;">分数+<span class="addScores">${imageVo.mark}</span></p>
				<p><img src="resources/images/clock.png" style="width:32px;height:32px;">时间+<span class="addTime">${imageVo.mark}</span></p>
				
				<p style="text-align:center"><img src="resources/images/next.png" style="width:128px;height:128px"/></p>
			
				<a href="#" data-role="button" data-inline="true" class="nextGame">下一关</a>
				<a href="#welcome" data-role="button" data-inline="true" >不想玩了</a>
			</div>
		</div>
		<!-- 猜图成功，进入下一关，结束 -->
		
		<!-- 游戏通关 -->
		<div id="gameoverPopup" data-role="popup" data-overlay-theme="a" data-dismissible="false">
			<div data-role="header">
				<h1>恭喜全部通关</h1>
			</div>
			<div data-role="content">
				<p style="text-align:center"><img src="resources/images/success.png" style="width:128px;height:128px"/></p>
			
				<a href="#" data-role="button" data-inline="true" rel="${user.loginid}" class="restartGame">重新游戏</a>
				<a href="#welcome" data-role="button" data-inline="true" >不想玩了</a>
			</div>
		</div>
		<!-- /游戏通关 -->
	</div>
</div>